<template>
  <div class="container">
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        slot="header"
        v-if="this.$route.query.id"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>前端</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 头部搜索 -->
      <el-row type="flex" justify="space-between" align="center">
        <!-- input框 -->
        <el-col>
          <el-form :inline="true" ref="FormDataRef" :model="formData">
            <el-form-item label="标签名称" prop="tagName">
              <el-input v-model="formData.tagName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formData.state" placeholder="请选择">
                <el-option label="禁用" value="0"></el-option>
                <el-option label="启用" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="clear">清除</el-button>
              <el-button type="primary" size="small" @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 新增按钮 -->
        <el-col>
          <el-row type="flex" justify="end">
            <el-button
              type="text"
              icon="el-icon-back"
              v-if="this.$route.query.id"
              @click="$router.back()"
              >返回学科</el-button
            >
            <el-button
              type="success"
              size="small"
              icon="el-icon-edit"
              @click="addTage"
              >新增标签</el-button
            >
          </el-row>
        </el-col>
      </el-row>
      <!-- /头部搜索 -->
      <!-- 提示文案 -->
      <el-alert type="info" show-icon :closable="false">
        <span slot="title">数据一共{{ total }}条</span>
      </el-alert>
      <!-- table表格 -->
      <el-table :data="TagsList">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属科目" prop="subjectName"></el-table-column>
        <el-table-column label="标签名称" prop="tagName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="{ row }">
            <span v-if="row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" v-if="row.state === 1" @click="disabled(row)"
              >禁用</el-button
            >
            <el-button type="text" v-else @click="start(row)">启用</el-button>
            <el-button
              type="text"
              :disabled="row.state === 1 ? true : false"
              @click="edit(row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state === 1 ? true : false"
              @click="deltag(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="formData.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 新增标签弹层 -->
    <el-dialog
      :title="titleText"
      :visible.sync="showDialog"
      width="20%"
      @close="btnCancel"
    >
      <el-form
        :model="tagForm"
        :rules="tagFormRules"
        ref="tagFormRef"
        label-width="80px"
      >
        <el-form-item label="所属学科" prop="subjectID" v-if="!this.$route.query.id">
          <el-select v-model="tagForm.subjectID" style="width:100%">
            <el-option
              v-for="item in simpleList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="tagForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="end">
        <el-button @click="btnCancel">取消</el-button>
        <el-button type="primary" @click="btnok">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  remove,
  add,
  changeState,
  detail,
  update
} from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'

import { parseTimeByString } from '../../filters/index'
export default {
  name: 'Tags',
  props: {
    // // 用这个组件需要传一个id
    // tageId: {
    //   type: Number,
    //   default: null
    // }
  },
  data () {
    return {
      simpleList: [], // 学科列表
      TagsList: [], // 标签列表数据
      formData: {
        page: 1, // 当前页数
        pagesize: 10, // 每页条数
        tagName: '', // 标签名称
        state: null,
        subjectID: null
      },
      total: 0,
      showDialog: false,
      tagForm: {
        tagName: '',
        subjectID: null
      },
      tagFormRules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      tagId: null
    }
  },
  computed: {
    titleText () {
      return this.tagId ? '修改标签' : '新增标签'
    }
  },
  created () {
    this.getTagsList()
    this.simple()
  },
  methods: {
    async simple () {
      const { data } = await simple()
      // console.log(data)
      this.simpleList = data
    },
    // 获取标签列表数据
    async getTagsList () {
      // 判断是否从学科管理跳转而来
      if (!this.$route.query.id) {
        // 不是就 获取全部数据
        const { data } = await list(this.formData)
        console.log(data)
        this.TagsList = data.items
        this.total = data.counts
        // this.formData.page = parseInt(data.page)
        // this.formData.pagesize = parseInt(data.pagesize)
      } else {
        // 是就 获取当前跳转过来学科id的数据
        const { data } = await list({ ...this.formData, subjectID: this.$route.query.id, subjectName: this.$route.query.name })
        console.log(data)
        this.TagsList = data.items
        this.total = data.counts
        // this.formData.page = parseInt(data.page)
        // this.formData.pagesize = parseInt(data.pagesize)
      }

      // 直接点击进来
      // const { data } = await list(this.formData)
      // console.log(data)
      // this.TagsList = data.items
      // this.total = data.counts
      // this.formData.page = parseInt(data.page)
      // this.formData.pagesize = parseInt(data.pagesize)
    },
    handleSizeChange (newSize) {
      // 每页条数改变触发
      // console.log(newSize)
      this.formData.pagesize = newSize // 更新每页条数
      this.getTagsList()
    },
    handleCurrentChange (newPage) {
      // 当前页码改变触发
      // console.log(newPage)
      this.formData.page = newPage // 更新当前页码
      this.getTagsList()
    },
    // 新增标签
    addTage () {
      this.simple()
      this.showDialog = true
    },
    // 删除标签
    async deltag (id) {
      try {
        await this.$confirm('确认删除吗？')
        await remove({ id })
        // console.log(id)
        this.$message.success('删除成功')
        this.getTagsList()
      } catch (error) {
        console.log(error)
      }
    },
    // 点击弹层确定提交表单
    async btnok () {
      await this.$refs.tagFormRef.validate()
      if (!this.tagId) {
        // 添加弹层
        // 判断是否是否从学科管理跳转而来
        if (!this.$route.query.id) {
          // 不是跳转而来 就添加学科 跟标签
          await add(this.tagForm)
          this.$message.success('添加成功')
        } else {
          // 跳转而来 只添加标签
          await add({ subjectID: this.$route.query.id, tagName: this.tagForm.tagName })
          this.$message.success('添加成功')
        }
        //
        // await add(this.tagForm)
        // this.$message.success('添加成功')
      } else {
        // 编辑弹层
        await update(this.tagForm)
        this.$message.success('修改成功')
      }

      this.getTagsList()
      this.showDialog = false
    },
    // 弹层取消按钮
    btnCancel () {
      this.$refs.tagFormRef.resetFields()
      this.tagForm = {
        tagName: '',
        subjectID: null
      }
      this.tagId = null
      this.showDialog = false
    },
    // 清除表单
    async clear () {
      this.formData.tagName = ''
      this.formData.state = ''
      await this.getTagsList()
    },
    // 搜索按钮
    async search () {
      await this.getTagsList()
    },
    // 禁用
    async disabled (row) {
      row.state = 0
      await changeState({ id: row.id, state: row.state })
      // console.log(res)
    },
    // 启用
    async start (row) {
      row.state = 1
      await changeState({ id: row.id, state: row.state })
      // console.log(res)
    },
    // 编辑
    async edit (id) {
      const { data } = await detail({ id })
      // console.log(data)
      this.tagForm = data
      this.showDialog = true
      this.tagId = id
    }
  }
}
</script>

<style scoped>
.container {
  padding: 15px;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
